$(document).ready(function()
{
    loadEvent();
})


function loadEvent(){
     $.getJSON("result").done(function(events){
       console.log(events);
       showDataBases(events);
     }).fail(function(e){
        console.log(e);
     });
}

function showDataBases(events)
{
    $("#Memory").empty();
    $("#Detail").empty();
    for(var event of events){
    console.log(event);
        var view =  $(`
        <div class="col-lg-4 col-sm-6 mb-4">
            <div class="portfolio-item">
                    <a class="portfolio-link" data-bs-toggle="modal" >
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                        </div>
                        <img class="img-fluid" src="" alt="..." />
                    </a>
                <div class="portfolio-caption">
                        <div class="portfolio-caption-heading"><span></span></div>
                </div>
            </div>
        </div>
                `);

         var view2 =$(` <div class="portfolio-modal modal fade"  tabindex="-1" role="dialog" aria-hidden="true" id ="cont">
                                       <div class="modal-dialog">
                                           <div class="modal-content">
                                               <div class="close-modal" data-bs-dismiss="modal"><img src="" alt="Close modal" /></div>
                                               <div class="container">
                                                   <div class="row justify-content-center">
                                                       <div class="col-lg-8">
                                                           <div class="modal-body">
                                                               <!-- Project details-->
                                                               <h2 class="text-uppercase"></h2>

                                                               <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1.jpg" alt="..." />
                                                               <p></p>
                                                               <button class="btn btn-primary btn-xl text-uppercase"  type="button">
                                                                                                                         <i class="fas fa-xmark me-1"></i>
                                                                <a id ="collection">收藏</a>
                                                               </button>
                                                               <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
                                                                   <i class="fas fa-xmark me-1"></i>
                                                                   Close Project
                                                               </button>
                                                           </div>
                                                       </div>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                   </div>
                                   `)

        view2.find("h2").append(event.date);
        view2.find("img").attr("src","./image/upload/"+event.picture);
        view2.find("p").append(event.event);
        view2.attr("id","portfolioModal"+event.id);
        view2.find("#collection").attr("href","AddToCollection?eventId="+event.id);

        view.find("img").attr("src","./image/upload/"+event.picture);
        view.find("a").attr("href","#portfolioModal"+event.id);
        view.find("span").append(event.date);
        $("#Memory").append(view);
        $("#Detail").append(view2);
    }








}